import React from 'react';
import './client.scss';
import '../index/index.scss';
import Closing from './closing/closing.jsx';
import Footer from '../widget/footer/footer.jsx';
class Client extends React.Component{
	constructor (props) {
		super(props)
		this.state={
			navList: ['预计成交率', '标签', '搜索'],
			navNum: 0,
			listCloing: ['预计成交率', '最后跟进时间', '最后活动时间'],
			listNum:0,
			content: <Closing orderBy={1}/>,
			hide: 'hiden',
			closingList:[]
		}
	}
	show (index) { //选项卡
		this.setState({
			navNum: index
		},() => {
			if (index === 0){
				this.setState({
					hide: this.state.hide === 'hiden' ? '' : 'hiden'
				})
			} else if (index === 1){
				this.props.history.push(`${window.baseUrl}/client/label`)
			} else if (index === 2){
				this.props.history.push(`${window.baseUrl}/client/search`)
			}
		})
	}
	showDown (index) {　//二级选项卡
		this.setState({
			listNum: index
		},()=>{
			this.setState({
				content: <Closing orderBy={index+1}/>
			})
		})
	}
	hiden () {
		this.setState({
			hide: 'hiden'
		})
	}
	componentDidMount(){
		document.title = '客戶';
	}
	render() {
		return(
			<div className='client'>
				{/*<div className="title">
					<div><i className="glyphicon glyphicon-close"></i></div>
					<div>客戶</div>
					<div><i className="glyphicon glyphicon-options"></i></div>
				</div>*/}
				<div className="header">
					{
						this.state.navList.map((item,index) => {
							return(
								<div onClick={this.show.bind(this,index)} className={this.state.navNum === index ? 'cardActive' : undefined} key={index}>
									{item}
									{
										index === 0 ? <i className="glyphicon glyphicon-down client_down"></i> : ''
									}
								</div>
							)
						})
					}
				</div>
				<div className={`clientDown ${this.state.hide}`} onClick={this.hiden.bind(this)}>
					<div className="client_text">
						{
							this.state.listCloing.map((item,index) => {
							return(
								<div onClick={this.showDown.bind(this,index)} className={this.state.listNum === index ? 'card_active' : undefined} key={index}>
									{item}
								</div>
							)
						})
						}
					</div>
				</div>
				<div className="client_content">
					{this.state.content}
				</div>
				<Footer/>
			</div>
			)
	}
}
export default Client;
